import React, { Component, Fragment } from 'react'
import { Table, Tag, Spin, Icon, Button, Modal } from 'antd'
import { postUserList, postUserListPage, postDeleteUser } from '@/requests'
export default class Users extends Component {
  constructor() {
    super()
    this.state = {
      confirmLoading: false,
      currentRecordId: null,
      modalVisible: false,
      data: [],
      isSpinning: true,
      pagination: {
        current: 1,
        total: 0
      }
    }
  }

  columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: text => <a href="##">{text}</a>
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age'
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender'
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address'
    },
    {
      title: '职位',
      key: 'position',
      dataIndex: 'position',
      render: pos => {
        let color = 'lime'
        switch (pos) {
          case '管理员':
            color = '#2db7f5'
            break
          case '普通用户':
            color = 'blue'
            break
          case '经理':
            color = '#f50'
            break
          default:
            break
        }
        return <Tag color={color}>{pos}</Tag>
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <span>
          <Button.Group>
            <Button
              type="primary"
              onClick={this.toEdit.bind(this, record.id)}
              icon="edit"
              size="small"
            >
              编辑
            </Button>
            <Button
              type="danger"
              onClick={this.handleDeleteButtonClick.bind(this, record.id)}
              icon="delete"
              size="small"
            >
              删除
            </Button>
          </Button.Group>
        </span>
      )
    }
  ]
  componentDidMount() {
    this.fetchDate()
  }

  handleDeleteButtonClick = id => {
    this.setState({
      modalVisible: true,
      currentRecordId: id
    })
  }

  toEdit = id => {
    this.props.history.push(`/users/edit_user/${id}`)
  }

  hideDeleteModal = () => {
    this.setState({
      modalVisible: false
    })
  }

  handleDelete = () => {
    // console.log(this.state.currentRecordId)
    this.setState(
      {
        confirmLoading: true
      },
      () => {
        postDeleteUser(this.state.currentRecordId).then(resp => {
          this.fetchDate()
          console.log(resp)
          this.setState({
            confirmLoading: false,
            modalVisible: false
          })
        })
      }
    )
  }

  handleTableChange = pagination => {
    console.log(pagination)
    this.setState(
      {
        pagination,
        isSpinning: true
      },
      () => {
        console.log(111)
        this.fetchDate()
      }
    )
  }
  fetchDate() {
    // 前端分页方法
    // posiUserList()
    // .then(data => {
    //   this.setState({
    //     data,
    //     isSpinning:false
    //   })
    // })
    const offset = (this.state.pagination.current - 1) * 10
    postUserListPage({
      limited: 10,
      offset
    }).then(resp => {
      console.log(resp)
      this.setState({
        data: resp.list,
        isSpinning: false,
        pagination: {
          total: resp.totalCount,
          current: this.state.pagination.current
        }
      })
    })
  }
  render() {
    return (
      <Fragment>
        <h2>人员管理</h2>
        <Spin
          spinning={this.state.isSpinning}
          tip="加载中....."
          indicator={<Icon type="loading" style={{ fontSize: 24 }} spin />}
        >
          <Table
            rowKey={record => record.id}
            columns={this.columns}
            dataSource={this.state.data}
            pagination={this.state.pagination}
            onChange={this.handleTableChange}
          />
        </Spin>
        <Modal
          title="确认要删除吗？"
          visible={this.state.modalVisible}
          onOk={this.handleDelete}
          onCancel={this.hideDeleteModal}
          confirmLoading={this.state.confirmLoading}
          okText="确认"
          cancelText="取消"
        >
          <p>此操作不可逆！！！</p>
        </Modal>
      </Fragment>
    )
  }
}
